<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="section_1 flex-col">
				<QSNavbar :navbarItems="navbarItems_1" backgroundColor="rgba(0,0,0,0)"></QSNavbar>
				<view class="choujiang">
					<view class="wheel-wrapper">
						<view class="wheel-pointer" :class="{freeze: btnImg}" @click="$antiClicks(onClickRotate)">
							<image :src="btnImg" style="width: 150upx;" mode='widthFix'></image>
						</view>
						<view class="wheel-bg" :class="{freeze: bgImg}"
							:style="{ transform: 'rotate('+wheelDeg+'deg)',background:'url('+bgImg+')'}">
							<view class="prize-list">
								<view class="prize-item-wrapper" v-for="(item,index) in prizeList" :key="index">
									<view class="prize-item"
										:style="{ transform: 'rotate('+(360/ prizeList.length) * index+'deg)'}">
										<view class="prize-name" v-if="item.title != null">
											{{ item.title }}
										</view>
										<view class="prize-name" v-else></view>
										<view class="prize-icon">
											<!-- <text class="iconfont iconhb">&#xe61d;1211</text> -->
											<image style="width: 30rpx;height: 30rpx;" :src="item.pic" mode=""></image>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view v-if="type == 1"
							style="width: 65%;height: 110rpx;position: absolute;top: 100%;left: 17%;border-radius: 9rpx;text-align: center;">
							<view style="color: #fff;font-size: 32rpx;margin-top: 10rpx;font-weight: 700;">
								我的积分：{{else_points}}
							</view>
							<view style="color: #fff;font-size: 22rpx;margin-top: 10rpx;">
								单次抽奖机会消耗{{lottery_points}}积分
							</view>
						</view>
						<view v-if="type == 2"
							style="width: 65%;height: 110rpx;position: absolute;top: 100%;left: 17%;border-radius: 9rpx;text-align: center;">
							<view style="color: #fff;font-size: 32rpx;margin-top: 10rpx;font-weight: 700;">
								我的次数：{{free_counts}}
							</view>
							<view style="color: #fff;font-size: 22rpx;margin-top: 10rpx;">
								单次抽奖机会消耗1次
							</view>
						</view>
					</view>
					<scroll-view scroll-y
						style="width: 80%;height: 350rpx;position: absolute;bottom: 4.5%;left: 10%;border-radius: 9rpx;">
						<view class="">
							<text style="padding: 10rpx;">
								{{destitle}}
							</text>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>
		<view class=""
			style="width: 100%;min-height: 100vh;background-color: rgba(0, 0, 0, 0.6);position: relative;top: 0;z-index: 997;"
			v-if="choujiang">
			<view class="" style="width: 100%;height: 70%;position: absolute;top: 23%;left: 90rpx;z-index: 998;">
				<image style="width: 586rpx;height: 776rpx;position: absolute;top: 0;left: 0;"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/e92024b5af9dc5cd3788d143f17443a5b4eb2c71.png"
					mode=""></image>
				<view class=""
					style="width: 300rpx;height: 100rpx;position: absolute;top: 50%;left: 18%;z-index: 999;text-align: center;color: #fff; ">
					{{text}}
				</view>
				<image @click="guanbi" style="width: 56rpx;height: 56rpx;position: absolute;top: 70%;left: 34%;"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f80c37be36aff8c87ba40238297a3e155d349bd0.png"
					mode=""></image>
			</view>
		</view>
		<view class=""
			style="width: 100%;min-height: 100vh;background-color: rgba(0, 0, 0, 0.6);position: relative;top: 0;z-index: 997;"
			v-if="weizhongj">
			<view class="" style="width: 100%;height: 70%;position: absolute;top: 25%;left: 120rpx;z-index: 998;">
				<image style="width: 495rpx;height: 489rpx;position: absolute;top: 0;left: 0;"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/4cbf015421b8d5c71951a5792833b7db8b4ca1b6.png"
					mode=""></image>
				<!-- <view class=""  style="width: 300rpx;height: 100rpx;position: absolute;top: 50%;left: 18%;z-index: 999;text-align: center;color: #fff; ">
					{{text}}
				</view> -->
				<image @click="guanbi" style="width: 56rpx;height: 56rpx;position: absolute;top: 50%;left: 30%;"
					src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f80c37be36aff8c87ba40238297a3e155d349bd0.png"
					mode=""></image>
			</view>
		</view>

	</view>
</template>

<script>
	import QSNavbar from "@/components/QS-Navbar/QS-Navbar.vue";
	const market = require("@/api/market/index.js");
	export default {
		components: {
			QSNavbar
		},
		// data函数中
		data() {
			return {
				navbarItems_1: [{
						type: "icon",
						icon: "back",
						layout: "left",
						width: 15,
						doEvent: "back",
						iconColor: "#fff",
					},
					{
						type: "text",
						text: "幸运抽奖",
						width: 70,
						weight: "bold",
						color: "#fff",
						textAlign: "left",
					},
				],
				prizeList: [{
						id: 1,
						award_name: '一等奖',
						award_title: '1111',
						memo: "222",
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png'
					},
					{
						id: 2,
						award_name: '二等奖',
						award_title: '1111',
						memo: "222",
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png'
					},
					{
						id: 3,
						award_name: '三等奖',
						award_title: '9',
						memo: "3",
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png'
					},
					{
						id: 4,
						award_name: '4',
						award_title: '四等奖',
						memo: "222",
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png'
					},
					{
						id: 5,
						award_name: '34',
						award_title: '五等奖',
						memo: "222",
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png'
					},
					{
						id: 6,
						award_name: '45',
						award_title: '六等奖',
						memo: "222",
						img: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/7a3bf342619e164095c3095cd453b945ac257f19.png'
					}
				], //奖品分类
				bgImg: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/f89250a7b4409a84f0f4b982f9b15800b295bbde.png', //  转盘背景
				// bgImg: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2a85d22ef876439a2071c6e038b5fc72a4f7f6cd.png', //  转盘背景
				btnImg: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/9474226a949c6f39dde2a92316487ca95ead3378.png', //  转盘指针图片
				lucky: '', //  中奖ID
				prizeNumber: 8, //  转盘显示奖品个数
				rolling: false, //控制转盘转动
				wheelDeg: 0, //转的角度
				title: '',
				cname: "",
				anoClick: true,
				act_id: '',
				destitle: "",
				choujiang: false,
				weizhongj: false,
				text: '',
				else_points: '',
				lottery_points: '',
				type: '',
				free_counts: ''
			}
		},
		onLoad(options) {
			console.log(options)
			this.act_id = options.act_id
			this.type = options.type
			// uni.setNavigationBarTitle({
			// 	title: '领券中心'
			// });
			this.getLotteryIndex()
		},
		//methods对象中
		methods: {
			guanbi() {
				this.choujiang = false
				this.weizhongj = false
			},
			async getLotteryIndex() {
				let that = this;
				let postData = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					act_id: this.act_id,
					open_id: uni.getStorageSync("openid"),
				}
				let res = await market.getLotteryIndex(postData);
				if (res.code == 1) {
					this.prizeList = res.data.pool
					this.destitle = res.data.result.des
					this.lottery_points = res.data.result.lottery_points
					this.else_points = res.data.else_points
					this.free_counts = res.data.free_counts
				}
			},
			onClickRotate() {
				let that = this;
				//参数
				if (this.type == 1) {
					let postData = {
						app_id: this.$https.weixinAppId,
						project_id: getApp().globalData.projectId,
						act_id: this.act_id,
						open_id: uni.getStorageSync("openid"),
					}
					// 接口， 参考我写的接口封装， 也可以用自己的办法， 主要的是接口请求成功后的操作
					// let res = await market.onClickRotate(postData);
					// that.apifun.unirequest(that.apifun.turntable_luckdraw, 'post', data, (res) => {
					market.start_lottery(postData).then(res => {
						console.log(res, 'ppp')
						if (res.code === 1) {
							let data = res.data;
							this.else_points = res.data.else_points
							//后端返回的中奖id
							that.lucky = data.index;
							let luckyindex = '';
							//为了转盘停到指控区域，通过返回的中奖id，在奖品列表里面查找对应的奖项的索引
							that.prizeList.forEach((item, index) => {
								if (that.lucky == item.id) {
									luckyindex = index * 1;
									this.title = item.title
									this.cname = item.cname
								}
							})
							// let text = '恭喜得到' + that.title + that.cname;
							this.text = that.cname;
							console.log(this.text)
							that.rolling = true; //中奖成功，控制转盘转动
							const {
								wheelDeg,
								prizeList
							} = this;
							//数字8是转盘的块数也是奖项的数量，luckyindex中的奖项的索引
							this.wheelDeg = wheelDeg - wheelDeg % 360 + 8 * 360 + (360 - 360 / prizeList.length *
								luckyindex);
							//中奖返回中奖信息，this.apifun.toast(text);是封装的提示，可以用uniapp的提示方法代替
							if (res.data.found) {
								setTimeout(() => {
									that.rolling = false;
									// this.apifun.toast(text);
									// uni.showToast({
									// 	title: text,
									// 	icon: 'exception',
									// 	duration: 850
									// });
									that.choujiang = true
								}, 4500);
							} else {
								setTimeout(() => {
									that.rolling = false;
									that.weizhongj = true
								}, 4500);
							}

						} else {
							uni.showToast({
								title: res.info,
								icon: 'none',
								duration: 850
							});
						}
					})
				} else if (this.type == 2) {
					let postData = {
						app_id: this.$https.weixinAppId,
						project_id: getApp().globalData.projectId,
						act_id: this.act_id,
						open_id: uni.getStorageSync("openid"),
					}
					// 接口， 参考我写的接口封装， 也可以用自己的办法， 主要的是接口请求成功后的操作
					// let res = await market.onClickRotate(postData);
					// that.apifun.unirequest(that.apifun.turntable_luckdraw, 'post', data, (res) => {
					market.start_lottery(postData).then(res => {
						console.log(res, 'ppp')
						if (res.code === 1) {
							let data = res.data;
							this.free_counts = res.data.free_counts
							//后端返回的中奖id
							that.lucky = data.index;
							let luckyindex = '';
							//为了转盘停到指控区域，通过返回的中奖id，在奖品列表里面查找对应的奖项的索引
							that.prizeList.forEach((item, index) => {
								if (that.lucky == item.id) {
									luckyindex = index * 1;
									this.title = item.title
									this.cname = item.cname
								}
							})
							// let text = '恭喜得到' + that.title + that.cname;
							this.text = that.cname;
							console.log(this.text)
							that.rolling = true; //中奖成功，控制转盘转动
							const {
								wheelDeg,
								prizeList
							} = this;
							//数字8是转盘的块数也是奖项的数量，luckyindex中的奖项的索引
							this.wheelDeg = wheelDeg - wheelDeg % 360 + 8 * 360 + (360 - 360 / prizeList.length *
								luckyindex);
							//中奖返回中奖信息，this.apifun.toast(text);是封装的提示，可以用uniapp的提示方法代替
							if (res.data.found) {
								setTimeout(() => {
									that.rolling = false;
									// this.apifun.toast(text);
									// uni.showToast({
									// 	title: text,
									// 	icon: 'exception',
									// 	duration: 850
									// });
									that.choujiang = true
								}, 4500);
							} else {
								setTimeout(() => {
									that.rolling = false;
									that.weizhongj = true
								}, 4500);
							}

						} else {
							uni.showToast({
								title: res.info,
								icon: 'none',
								duration: 850
							});
						}
					})
				}
			},
		}

	};
</script>
<style scoped lang="scss">
	@import '../../static/css/common/common.scss';

	.page {
		width: 100%;
		height: 100%;
		position: relative;

		.section_1 {
			width: 100%;
			height: 100%;
			background: url('https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/d2beda0589239cce817261e2fd12c1e4df45b6c2.png') 100% no-repeat;
			background-size: 100% 100%;
			position: fixed;
			z-index: 9;

			.choujiang {
				width: 100%;
				height: 600rpx;
			}

			.wheel-wrapper {
				width: 600upx;
				height: 600upx;
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%, -50%);
			}

			.wheel-pointer {
				width: 150upx;
				height: 192upx;
				border-radius: 1000px;
				background: yellow;
				position: absolute;
				left: 50%;
				top: 65%;
				margin-top: -88upx;
				transform: translate(-50%, -50%);
				text-align: center;
				line-height: 120upx;
				z-index: 10;
			}

			.wheel-bg {
				width: 100%;
				height: 100%;
				border-radius: 50% 50%;
				overflow: hidden;
				transition: transform 4s ease-in-out;
				background: #dcdcdc;
			}

			.freeze {
				border-radius: 0;
				background: none;
				background-size: 100% !important;
			}

			.prize-list {
				width: 100%;
				height: 100%;
				position: relative;
				text-align: center;
			}

			.prize-item-wrapper {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 200upx;
				height: 300upx;
			}

			.prize-item {
				width: 100%;
				height: 100%;
				transform-origin: bottom;
			}

			.prize-name {
				padding: 86upx 0 10upx;
				color: #E73636;
				font-size: 30rpx;
				font-weight: bold;
				width: 200rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				text-align: center;
			}

			.prize-icon .iconhb {
				font-size: 50rpx;
				color: #FA4A4A;
			}
		}
	}
</style>